const { createApp } = VuecreateApp({    delimiters: ['${', '}$'],    mixins: [window.mix ? window.mix : {}],    methods: {        postData(url, payload, config) {            return axios.post(url, payload, config ? config : {})                .then(response => {                    return response.data ? response : response.json?.()                }).catch(() => {                    console.warn('Метод ' + url + ' не реализован')                    throw new Error('no "post" method')                })        },        getData(url, payload) {            return axios.get(url, { params: payload })                .then(response => response.json())                .catch(() => {                    console.warn('Метод ' + url + ' не реализован')                    throw new Error('no "get" method')                })        },        search() {            location.assign(`/catalog?filter=${this.searchText}`)        },        getCategories() {            this.getData('/api/categories')                .then(data => this.categories = data)                .catch(() => {                    console.warn('Ошибка получения категорий')                    this.categories = []                })        },        generateCategories () {            const example = {                    id: 1,                    title: "Category",                    image: {                        src: "/static/frontend/assets/img/icons/departments/3.svg",                        alt: "3.svg",                    },                    href: "",                    subcategories: [                        {                            id: 55,                            title: "Inner category 1",                            image: {                                src: "/static/frontend/assets/img/icons/departments/1.svg",                                alt: "1.svg",                            },                            href: "/catalog/55",                        },                        {                            id: 66,                            title: "Inner category 2",                            image: {                                src: "/static/frontend/assets/img/icons/departments/2.svg",                                alt: "2.svg",                            },                            href: "/catalog/99",                        },                    ],                }            const categories = []            for (let i = 1; i <= 10; i++) {                categories.push({                    ...example,                    id: i,                    title: "Item" + 1,                    href: '/catalog/'+i                })            }            this.categoriesFromServer = categories        },        generateCatalog () {            const example = {                id: 1,                category: 1,                title: 'Item 1',                href: '#',                price: 500,                freeDelivery: true,                description: 'description',                images: [                    '/static/frontend/assets/img/content/home/card.jpg',                    '/static/frontend/assets/img/content/home/card.jpg',                    '/static/frontend/assets/img/content/home/card.jpg'                ],                count: 1,                tags: ["development"]            }            const catalog = []            for (let i = 1; i <= 100; i++) {                catalog.push({                    ...example,                    id: i,                    title: 'Item ' + i,                    href: '/product/' + i,                    category: Math.floor(Math.random() * 10),                    price: Math.floor(Math.random() * 50000),                    freeDelivery: Math.floor(Math.random()),                    count: Math.floor(Math.random() * 10),                    date: new Date(Date.now() - i*1000*60*60),                    tags: [this.topTags[i % this.topTags.length].id],                    reviews: Math.floor(Math.random() * 30),                    rating: Math.floor(Math.random() * 5 * 100) / 100                })            }            this.catalogFromServer = [...catalog]        },        getBasket() {            const basket = {}            this.getData('/api/basket')                .then(data => {                    data.forEach(item => {                        basket[item.id] = {                            ...item                        }                    })                    this.basket = basket                }).catch(() => {                    console.warn('Ошибка при получении корзины')                    this.basket = {}                })        },        getLastOrder() {            this.getData('/api/orders/active').then(data => {                this.order = {                    ...this.order,                    ...data                }            }).catch(() => {                console.warn('Ошибка при получении активного заказа')                this.order = {                    ...this.order,                }            })        },        addToBasket (item, count) {            const id = item.id            this.postData('/api/backet/', {                id: item.id,                count: count || 1 // если уже есть в корзине то увеличить кол-во            }).then(data => {                this.basket[id] = data            }).catch(() => {                console.warn('Ошибка при добавлении заказа в корзину')            })        },        removeFromBasket(item, count) { //if count === null then delete all            const id = item.id            axios.delete('/api/basket', { params: { id, count } })                .then(response => response.json())                .then(data => { // updated basket                    this.basket = data                }).catch(() => {                    console.warn('Ошибка при удалении заказа из корзины')                })        }    },    computed: {        basketCount () {            return (this.basket && Object.values(this.basket)?.reduce((acc, val) => {                acc.count += val.count                acc.price += val.price                return acc            }, { count: 0, price: 0 })) ?? { count: 0, price: 0 }        }    },    data() {        return {            // catalog page            filters: {                price: {                    minValue: 1,                    maxValue: 500000,                    currentFromValue: 7,                    currentToValue: 27,                },            },            sortRules: [                { id: 'rating', title: 'Популярности'},                { id: 'price', title: 'Цене'},                { id: 'reviews', title: 'Отзывам'},                { id: 'date', title: 'Новизне'},            ],            topTags: [                {                    name: "Video",                    id: "video",                },                {                    name: "Development",                    id: "development",                },                {                    name: "Gaming",                    id: "gaming",                },                {                    name: "Asus",                    id: "asus",                },            ],            // reused data            categories: [],            categoriesFromServer: [            ],            // reused data            // catalog: [],            catalogFromServer: [            ],            orders: [],            cart: [],            paymentData: {},            basket: {},            order: {                orderId: null,                createdAt: '',                products: [],                fullName: '',                phone: '',                email: '',                deliveryType: '',                city: '',                address: '',                paymentType: '',                totalCost: 0,                status: ''            },            searchText: ''        }    },    mounted() {        // this.generateCategories()        // this.generateCatalog()        this.getCategories()        this.getBasket()        this.getLastOrder()    }}).mount('#site')